<template>
  <div class="home_div">
    <div :id="mapId" style="width: 100%; height: 500px;"></div>
</div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'HotelSystemMap',
  props: {
    mapId: {
      type: String,
      default: 'map'
    },
    center: {
      type: Array,
      default: () => [116.397428, 39.90923]
    },
    zoom: {
      type: Number,
      default: 13
    }
  },
  data () {
    return {
      map: null
    }
  },

  mounted () {
    // 创建地图对象
    this.map = new AMap.Map(this.mapId, {
      zoom: this.zoom,
      center: this.center,
      viewMode: '3D'
    })

    // 添加缩放控件
    this.map.addControl(new AMap.ZoomControl())
  },
  beforeDestroy () {
    // 销毁地图对象
    this.map.destroy()
  }
}
</script>

<style lang="less" scoped>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}

</style>
